<%
layout("tabbar.html", {index: 0}){
%>
<style>
    .pub-head{
        width:100%;
        height:40px;
        padding-left: 10px;
        line-height: 40px;
        background-color: #fff;
        color: #515151;
        font-size: 14px;
        margin-top: 10px;
        border-bottom: 7px solid #E0E0E1;
    }
    .pub-title{
        width: 100%;
        height: 26px;
        color:#C3C3C3;
        border-bottom: 1px solid #E0E0E1;
        font-size: 10px;
        line-height: 26px;
        padding-left: 10px;
    }
    .yk-type{
        width: 90%;
        margin: 10px auto;
        height: 32px;
    }
    .pub-type{
        height: 32px;
        float: left;
        text-align: center;
        border-radius: 5px;
        font-size: 13px;
        line-height: 32px;
        border:1px solid #DFDFDF;
        background-color: #F8F8F8;
        color: #000000;
    }
    .pub-active{
        border:1px solid #179C16;
        background-color: #1AAD19;
        color: #fff;
    }
    .rmb-type{
        height: 32px;
        float: left;
        text-align: center;
        border-radius: 5px;
        font-size: 13px;
        line-height: 32px;
        border:1px solid #DDDDDD;
        background-color: #FFFFFF;
        color: #666666;
        width: 30%;
        font-weight: bold;
    }
    .rmb-active{
        border:1px solid #66CAFF;
        color: #66CAFF;
    }
</style>

<div class="pub-head">
    批量充值
</div>
<div style="width: 100%;background-color: #fff;">
    <div class="pub-title">
        请选择油卡类型
    </div>
    <div class="yk-type">
        <div class="pub-type pub-active" style="width: 46.7%;">中石化</div>
        <div style="width: 5%;height: 32px;float: left;"></div>
        <div class="pub-type" style="width: 46.7%;">中石油</div>
        <input type="hidden" name="card_type" value="sinopec">
    </div>
    <div style="width: 92%;margin:20px auto;">
        <textarea class="weui-textarea" style="font-size:13px !important;border:1px solid #B2B2B2;border-radius: 3px;" id="test_new_line" placeholder="最多输入100个油卡号码，每个号码占一行" rows="7"></textarea>
        <input type="hidden" name="cards" />
    </div>
    <div class="pub-title">
        请选择充值金额
    </div>
    <div class="yk-type">
        <div class="rmb-type rmb-active" ><i>1000</i>元</div>
        <div style="width: 3.8%;height: 32px;float: left;"></div>
        <div class="rmb-type" ><i>500</i>元</div>
        <div style="width: 3.8%;height: 32px;float: left;"></div>
        <div class="rmb-type" ><i>200</i>元</div>
        <input type="hidden" name="prices" value="1000">
    </div>
</div>   
<div class="weui-btn-area">
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="showActionSheet">
        充值
    </a>
    <a href="javascript:;" style="display: none;" class="weui-btn weui-btn_disabled weui-btn_primary" id="hideActionSheet">
        充值
    </a>
</div>
<div class="js_dialog" id="dialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">余额即将不足</strong></div>
        <div class="weui-dialog__bd" id="rechargeText">您最少需充值${money / 100}元</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="confirmButton">确定</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="cancelDialog">取消</a>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
       if (${show}) {
           $('#dialog').fadeIn(200);
           $('#confirmButton').click(function () {
               $('#dialog').fadeOut(200);
               window.location.href = '${ctxPath}/recharge';
           });
           $('#cancelDialog').click(function () {
               $('#dialog').fadeOut(200);
           });
       }
    });
</script>
<script src="${ctxPath}/js/net.js"></script>
<script src="${ctxPath}/js/layer/layer.js"></script>
<script>
$(document).ready(function(){
    $(".rmb-type").click(function(){
        $(this).addClass("rmb-active").siblings().removeClass("rmb-active");
        var price = $(this).children("i").html();
        $("input[name=prices]").val(price);
    });
    $(".pub-type").click(function(){
        $(this).addClass("pub-active").siblings().removeClass("pub-active");
        var type = $(this).html();
        if(type=='中石油'){
            $("input[name=card_type]").val('cnpc');
        }else{
            $("input[name=card_type]").val('sinopec');
        }
        
    });
    $('#showActionSheet').click(function () {
        var newString = $("#test_new_line").val().replace(/\n/g, ',').replace(/\r/g, ',');
        newString = newString.replace(/_#_@/g, '<br/>');//IE7-8
        newString = newString.replace(/_@/g, '<br/>');//IE9、FF、chrome
        newString = newString.replace(/\s/g, '&nbsp;');//空格处理
        //alert(newString);
        $("input[name=cards]").val(newString);

        var card_type=$("input[name=card_type]").val();
        var cards = $("input[name=cards]").val();
        var prices = $("input[name=prices]").val();
        var str = new Array();
        str = cards.split(",");
        for(i=0;i<str.length;i++){
            if(card_type=='cnpc'){//中石油 9 16
                if(str[i].substr(0,1)!='9'||str[i].length!=16){
                    layer.msg("卡号有误,中石油卡号以9开头，16位.");
                    return false;
                }
            }
            if(card_type=='sinopec'){//中石化 100011 19
                if(str[i].substr(0,6)!='100011'||str[i].length!=19){
                    layer.msg("卡号有误,中石化卡号以100011开头，19位.");
                    return false;
                }
            }
        }

        var isCheck = true;
        //alert(card_type+";"+cards+";"+prices);
        if(card_type == ""){
            isCheck = false;
            layer.msg("请选择油卡类型");
            return false;
        }
        if(cards == ""||cards=="可输入多个油卡号码，号码间需用空格隔开"){
            isCheck = false;
            layer.msg("请输入卡号");
            return false;
        }
        if(prices == ""){
            isCheck = false;
            layer.msg("请选择充值金额");
            return false;
        }
        if(isCheck==true){
            $("#showActionSheet").hide();
            $("#hideActionSheet").show();
            var data = {
             	cardType: card_type,
             	cards: cards,
             	prices: prices
             }
            $.ajax({
                url:"${ctxPath}/api/user/oilRechargeBatch",
                type:'post',
                dataType:'json',
                data:data,
                success:function(res)
                {
                    
                    if(res.code==0){//成功
                        layer.msg(res.message);
                    }else if(res.code==1){//失败
                        layer.msg(res.message);
                    }
                    $("#showActionSheet").show();
                    $("#hideActionSheet").hide();
                    $("#test_new_line").val("");
                    $("input[name=cards]").val("");
                }
            });
        }
        return false;
    });
});
</script>
<% } %>